<template>
  <ScaleScreen
    :width="screenWidth"
    :height="screenHeight"
    class="scale-wrap"
    :selfAdaption="$store.state.setting.isScale"
  >
    <div class="map_box">
      <!-- 左侧树形结构面板 -->
      <transition name="slide-fade">
        <div class="tree-panel" v-if="showLayerPanel">
          <div class="tree-header">
            <div class="tree-title">图层管理</div>
            <div
              class="tree-close"
              @click="showLayerPanel = false"
              title="关闭图层管理"
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M18 6L6 18M6 6L18 18"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
          </div>
          <div class="tree-content">
            <el-tree
              :data="treeData"
              :props="defaultProps"
              node-key="id"
              :default-expanded-keys="['1', '5', '8']"
              :highlight-current="false"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            >
              <template slot-scope="{ node, data }">
                <div class="custom-tree-node">
                  <div class="node-label">
                    <i v-if="node.isLeaf" class="el-icon-document"></i>
                    <i v-else class="el-icon-folder-opened"></i>
                    <span>{{ node.label }}</span>
                  </div>
                  <el-checkbox
                    v-if="data && data.showCheckbox"
                    v-model="data.checked"
                    @change="(val) => data && handleCheckChange(data, val)"
                    :style="{
                      visibility: data && data.showCheckbox ? 'visible' : 'hidden',
                    }"
                  ></el-checkbox>
                </div>
              </template>
            </el-tree>
          </div>
        </div>
      </transition>

      <div id="map" class="map"></div>

      <!-- 自定义地图控件 -->
      <div class="map-controls">
        <!-- 地图旋转控件 - 移到最上面 -->
        <div class="control-group rotation-controls">
          <!-- 导航控制按钮 -->
          <div class="navigation-control">
            <div
              class="nav-btn nav-up"
              @click="increasePitch()"
              title="向上倾斜"
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M12 8L18 14H6L12 8Z" fill="currentColor" />
              </svg>
            </div>
            <div
              class="nav-btn nav-right"
              @click="mapManager.rotateClockwise()"
              title="向右旋转"
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M14 12L8 18V6L14 12Z"
                  fill="currentColor"
                />
              </svg>
            </div>
            <div
              class="nav-btn nav-center"
              @click="resetMapPosition()"
              title="重置地图角度"
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="currentColor" />
                <circle cx="12" cy="12" r="3" fill="currentColor" />
              </svg>
            </div>
            <div
              class="nav-btn nav-left"
              @click="mapManager.rotateCounterClockwise()"
              title="向左旋转"
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M10 12L16 6V18L10 12Z"
                  fill="currentColor"
                />
              </svg>
            </div>
            <div
              class="nav-btn nav-down"
              @click="decreasePitch()"
              title="向下倾斜"
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M12 16L6 10H18L12 16Z" fill="currentColor" />
              </svg>
            </div>
          </div>
        </div>

        <!-- 合并的缩放和定位控件 -->
        <div class="control-group combined-controls">
          <div class="control-btn" @click="mapManager.zoomIn()" title="放大">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 6V18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M6 12H18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
          <div class="control-btn" @click="mapManager.zoomOut()" title="缩小">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 12H18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
          <div
            class="control-btn"
            @click="locateCurrentPosition"
            title="定位当前位置"
          >
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="3"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M12 2V4"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M12 20V22"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M4 12H2"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M22 12H20"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M19.0708 4.92969L17.6568 6.34369"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M6.34315 17.6567L4.92908 19.0708"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M19.0708 19.0703L17.6568 17.6563"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M6.34315 6.34326L4.92908 4.92919"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
        </div>
      </div>

      <div
        class="tool-panel"
        :style="{ left: showLayerPanel ? '240px' : '20px' }"
      >
        <div
          class="tool-item"
          :class="{ active: drawingMode === 'polyline' }"
          @click="startDrawing('polyline')"
          title="绘制线段"
        >
          <div class="tool-icon">
            <img class="icon_imgs" src="@/assets/img/gisMap/Ruler.png" alt="" />
          </div>
        </div>
        <div
          class="tool-item"
          :class="{ active: drawingMode === 'polygon' }"
          @click="startDrawing('polygon')"
          title="绘制多边形"
        >
          <div class="tool-icon">
            <img class="icon_imgs" src="@/assets/img/gisMap/draw.png" alt="" />
          </div>
        </div>
        <div
          class="tool-item"
          :class="{ active: drawingMode === 'circle' }"
          @click="startDrawing('circle')"
          title="绘制圆形"
        >
          <div class="tool-icon">
            <img class="icon_imgs" src="@/assets/img/gisMap/round.png" alt="" />
          </div>
        </div>
        <div class="tool-item" @click="clearDrawings" title="清除绘制">
          <div class="tool-icon">
            <img class="icon_imgs" src="@/assets/img/gisMap/clear.png" alt="" />
          </div>
        </div>
        <div
          class="tool-item"
          :class="{ active: showLayerPanel }"
          @click="pipeline"
          title="图层管理"
        >
          <div class="tool-icon">
            <img class="icon_imgs" src="@/assets/img/gisMap/layer.png" alt="" />
          </div>
        </div>
        <div
          class="tool-item"
          :class="{ active: showLayerPanel }"
          @click="outMap"
          title="退出地图"
        >
          <div class="tool-icon">
            <img class="icon_imgs" src="@/assets/img/gisMap/outMap.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 绘制结果信息面板 -->
      <div class="info-panel" v-if="measureInfo.visible">
        <div class="info-header">
          <div class="info-title">测量结果</div>
          <div
            class="info-close"
            @click="closeMeasureInfo"
            title="关闭测量结果"
          >
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M18 6L6 18M6 6L18 18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
        </div>
        <div class="info-content">
          <div class="info-type-icon">
            <svg
              v-if="measureInfo.type === 'polyline'"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 21L21 3M3 21V14M3 21H10M21 3H14M21 3V10"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            <svg
              v-else-if="measureInfo.type === 'polygon'"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 3L20.5 8.5V15.5L12 21L3.5 15.5V8.5L12 3Z"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            <svg
              v-else-if="measureInfo.type === 'circle'"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="9"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>

          <template v-if="measureInfo.type === 'polyline'">
            <div class="info-item">
              <span class="info-label">线段长度:</span>
              <span class="info-value">{{ measureInfo.value }}</span>
            </div>
          </template>
          <template v-else-if="measureInfo.type === 'polygon'">
            <div class="info-item">
              <span class="info-label">面积:</span>
              <span class="info-value">{{ measureInfo.value }}</span>
            </div>
          </template>
          <template v-else-if="measureInfo.type === 'circle'">
            <div class="info-item">
              <span class="info-label">半径:</span>
              <span class="info-value">{{ measureInfo.value }}</span>
            </div>
            <div class="info-item" v-if="measureInfo.additionalValue">
              <span class="info-label">面积:</span>
              <span class="info-value">{{ measureInfo.additionalValue }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </ScaleScreen>
</template>

<script>
import ScaleScreen from "../../components/scale-screen/scale-screen.vue";
import MapManager from "../../utils/map/MapManager";
import { Checkbox, Message } from "element-ui";

export default {
  name: "MapManagerExample",
  components: { ScaleScreen, ElCheckbox: Checkbox },
  data() {
    return {
      mapManager: null,
      drawingMode: null,
      // 控制图层管理面板显示/隐藏
      showLayerPanel: false,
      // 测量结果信息
      measureInfo: {
        visible: false,
        type: null,
        value: 0,
        additionalValue: null,
      },
      // 信息窗体实例
      infoWindow: null,
      // 当前提示框所属的图层ID
      currentTipNodeId: null,
      // 树形结构数据
      treeData: [
        {
          id: "1",
          label: "地图图层",
          children: [
            {
              id: "2",
              label: "矢量图1",
              showCheckbox: true,
              checked: true,
            },
            {
              id: "3",
              label: "矢量图2",
              showCheckbox: true,
              checked: false,
            },
            {
              id: "4",
              label: "卫星图",
              showCheckbox: true,
              checked: false,
            },
          ],
        },
        {
          id: "5",
          label: "设施",
          children: [
            {
              id: "6",
              label: "事故网点",
              showCheckbox: true,
              checked: false,
            },
            {
              id: "7",
              label: "用气点",
              showCheckbox: true,
              checked: false,
            },
          ],
        },
        {
          id: "8",
          label: "管点",
          children: [
            {
              id: "9",
              label: "事故网点",
              showCheckbox: true,
              checked: false,
            },
            {
              id: "10",
              label: "阀门",
              showCheckbox: true,
              checked: false,
            },
            {
              id: "11",
              label: "已建管线",
              showCheckbox: true,
              checked: false,
            },
            {
              id: "12",
              label: "高压管线",
              showCheckbox: true,
              checked: false,
            },
            {
              id: "13",
              label: "昆仑燃气",
              showCheckbox: true,
              checked: false,
            },
            {
              id: "14",
              label: "规划高压",
              showCheckbox: true,
              checked: false,
            },
            {
              id: "15",
              label: "规划管线",
              showCheckbox: true,
              checked: false,
            },
            {
              id: "16",
              label: "规划次压",
              showCheckbox: true,
              checked: false,
            },
            {
              id: "17",
              label: "站点",
              showCheckbox: true,
              checked: false,
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  computed: {
    // 动态计算屏幕宽度
    screenWidth() {
      return window.innerWidth || document.documentElement.clientWidth || 1920;
    },
    // 动态计算屏幕高度
    screenHeight() {
      return window.innerHeight || document.documentElement.clientHeight || 1080;
    }
  },
  
  created() {
    // 预加载GeoJSON数据
    this.preloadGeoJsonData();
  },
  
  /**
   * 组件挂载后执行
   */
  mounted() {
    // 初始化地图
    this.initMap();
    // 确保地图图层始终有一个选中的选项
    this.ensureMapLayerSelected();
    // 添加窗口大小变化监听器
    this.handleResize = () => {
      this.$forceUpdate();
    };
    window.addEventListener('resize', this.handleResize);
  },
  
  methods: {
    /**
     * 预加载GeoJSON数据
     */
    preloadGeoJsonData() {
      // GeoJSON文件映射到树节点ID
      this.geoJsonMap = {
        "11": "BuiltPipeline.json",
        "12": "HighPressurePpipeline.json",
        "13": "KunlunGas.json",
        "14": "PlanningHighPressure.json",
        "15": "PlanningPipeline.json",
        "16": "PlanningSecondaryPressure.json",
        "17": "ZD.json"
      };
      
      // 存储加载的GeoJSON数据和对应的覆盖物
      this.geoJsonData = {};
      this.geoJsonOverlays = {};
    },
    /**
     * 增加地图俯仰角度
     */
    increasePitch() {
      if (this.mapManager) {
        const currentPitch = this.mapManager.getMap().getPitch();
        // 高德地图俯仰角度范围为0-83度
        const newPitch = Math.min(83, currentPitch + 15);
        this.mapManager.getMap().setPitch(newPitch);
        // 增加地图俯仰角度
      }
    },

    /**
     * 减少地图俯仰角度
     */
    decreasePitch() {
      if (this.mapManager) {
        const currentPitch = this.mapManager.getMap().getPitch();
        // 确保不小于0度
        const newPitch = Math.max(0, currentPitch - 15);
        this.mapManager.getMap().setPitch(newPitch);
        // 减少地图俯仰角度
      }
    },

    /**
     * 初始化地图
     */
    initMap() {
      // 创建地图管理器实例
      this.mapManager = new MapManager({
        container: "map",
        key: "9cf002e3b014bbb16ae2868546912456",
        securityJsCode: "d697fa9e150d2e82e3dc8090d40ddd58",
        version: "2.0",
        plugins: [
          "AMap.Scale",
          "AMap.MouseTool",
          "AMap.PolyEditor",
          "AMap.CircleEditor",
          "AMap.GeometryUtil",
          "AMap.Geolocation", // 添加定位插件
          // "AMap.ToolBar", // 移除工具条控件，不使用自带的缩放控件
        ],
        mapOptions: {
          zoom: 11,
          center: [116.397428, 39.90923],
          mapStyle: "amap://styles/darkblue",
          viewMode: "3D", // 3D视图模式
          rotateEnable: true,
          pitchEnable: true,
        },
        autoAddScale: true,
        // 已移除工具条控件配置，不使用自带的缩放控件
        // 使用自定义UI实现所需功能
        // 绘制工具配置
        drawingOptions: {
          styles: {
            polyline: {
              strokeColor: "#0096ff",
              strokeOpacity: 1,
              strokeWeight: 3,
            },
            polygon: {
              fillColor: "rgba(0, 150, 255, 0.3)",
              strokeColor: "#0096ff",
              strokeOpacity: 1,
              strokeWeight: 3,
            },
            circle: {
              fillColor: "rgba(0, 150, 255, 0.3)",
              strokeColor: "#0096ff",
              strokeOpacity: 1,
              strokeWeight: 3,
            },
          },
          autoLabel: true,
        },
      });

      // 初始化地图
      this.mapManager
        .init()
        .then(() => {
          // 地图初始化完成

          // 设置绘制完成回调
          this.mapManager.onDrawComplete(this.onDrawComplete);
        })
        .catch((error) => {
          // 地图初始化失败
        });
    },

    /**
     * 绘制完成回调
     * @param {Object} result - 绘制结果
     */
    onDrawComplete(result) {
      // 绘制完成

      // 更新测量信息
      this.measureInfo.type = result.type;
      this.measureInfo.value = result.measurement.value;
      this.measureInfo.additionalValue = result.measurement.additionalValue;
      
      // 确保测量信息面板显示
      this.$nextTick(() => {
        this.measureInfo.visible = true;
        // 测量信息面板已显示
      });
    },

    /**
     * 开始绘制
     * @param {string} mode - 绘制模式：'polyline', 'polygon', 'circle'
     */
    startDrawing(mode) {
      // 如果当前已经在绘制，先关闭测量信息面板
      if (this.drawingMode && this.measureInfo.visible) {
        this.measureInfo.visible = false;
      }
      this.drawingMode = mode;
      this.mapManager.startDrawing(mode);
    },

    /**
     * 清除所有绘制
     */
    clearDrawings() {
      this.mapManager.clearDrawings();
      this.drawingMode = null;
      // 关闭测量信息面板
      this.measureInfo.visible = false;
      // 关闭信息窗体
      this.closeInfoWindow();
      // 已清除所有绘制并关闭测量信息面板和提示窗体
    },

    /**
     * 关闭测量信息面板
     */
    closeMeasureInfo() {
      this.measureInfo.visible = false;
      // 测量信息面板已关闭，但绘制内容保留
      // 注意：这里只关闭面板，不清除绘制内容
    },

    /**
     * 定位当前位置
     */
    locateCurrentPosition() {
      if (this.mapManager) {
        // 关闭信息窗体
        this.closeInfoWindow();
        
        this.mapManager.locateCurrentPosition()
          .then(position => {
            // 当前位置
            Message.success("已定位到当前位置");
          })
          .catch(error => {
            // 定位失败
            Message.error("定位失败，请检查位置权限");
          });
      }
    },

    /**
     * 显示/隐藏图层管理面板
     */
    pipeline() {
      this.showLayerPanel = !this.showLayerPanel;
    },

    /**
     * 重置地图角度（只重置旋转角度，不改变位置）
     */
    resetMapPosition() {
      if (this.mapManager) {
        // 只重置地图角度和俯仰角，保持当前位置不变
        const map = this.mapManager.getMap();
        // 重置旋转角度为0
        map.setRotation(0);
        // 重置俯仰角为0
        map.setPitch(0);
        
        // 关闭信息窗体
        this.closeInfoWindow();
        
        // 地图角度已重置，信息窗体已关闭
      }
    },

    /**
     * 处理树节点点击
     * @param {Object} data - 节点数据
     */
    handleNodeClick(data) {
      // 节点点击
      // 这里可以根据节点ID或其他属性执行相应的操作
      // 例如切换地图图层、显示/隐藏特定元素等
    },

    /**
     * 处理复选框状态变化
     * @param {Object} data - 节点数据
     * @param {Boolean} checked - 复选框状态
     */
    handleCheckChange(data, checked) {
      // 确保data对象存在
      if (!data) {
        // handleCheckChange: data参数为空
        return;
      }
      
      // 复选框变化
      
      // 处理地图图层 - 单选模式
      if (data.id === "2" || data.id === "3" || data.id === "4") {
        // 确保treeData和children存在
        if (!this.treeData || !this.treeData[0] || !this.treeData[0].children) {
          // treeData结构不完整
          return;
        }
        
        // 如果尝试取消选中，且这是唯一选中的图层，则阻止操作
        if (!checked) {
          const mapLayers = this.treeData[0].children;
          const checkedCount = mapLayers.filter(layer => layer && layer.checked).length;
          
          if (checkedCount <= 1) {
            // 至少保留一个选中的图层
            data.checked = true;
            this.$message.warning("至少需要选择一个地图图层");
            return;
          }
        }
        
        // 如果选中了一个图层，取消选中其他图层（单选逻辑）
        if (checked) {
          const mapLayers = this.treeData[0].children;
          mapLayers.forEach(layer => {
            if (layer && layer.id !== data.id) {
              layer.checked = false;
            }
          });
        }
        
        // 设置图层可见性
        if (data.id === "2") {
          // 矢量图
          this.setMapStyle("amap://styles/darkblue");
          // 已切换到矢量图图层
        } else if (data.id === "3") {
          // 影像图
          this.setMapStyle("amap://styles/normal");
          // 已切换到影像图图层
        } else if (data.id === "4") {
          // 卫星图
          this.setMapStyle("amap://styles/satellite");
          // 已切换到卫星图图层
        }
      }
      // 处理管点分类下的子节点
      else if (data.id && typeof data.id === 'string' && data.id.startsWith('1') && data.id.length === 2) {
        // 加载或隐藏GeoJSON数据
        this.loadGeoJsonData(data.id, checked);
        
        // 如果选中了管点，在控制台输出提示信息
        if (checked) {
          // 已选择管点，正在加载GeoJSON数据并定位...
        } else {
          // 如果取消选择，且当前提示框属于该图层，则关闭信息窗体
          if (this.currentTipNodeId === data.id) {
            this.closeInfoWindow();
            // 关闭图层的提示框
          }
        }
      }
      // 其他图层处理...
    },

    /**
     * 加载GeoJSON数据
     * @param {string} nodeId - 节点ID
     * @param {boolean} show - 是否显示
     */
    loadGeoJsonData(nodeId, show) {
      // 确保nodeId有效
      if (!nodeId || typeof nodeId !== 'string') {
        // loadGeoJsonData: 无效的nodeId
        return;
      }
      
      // 确保geoJsonMap已初始化
      if (!this.geoJsonMap) {
        // loadGeoJsonData: geoJsonMap未初始化
        return;
      }
      
      // 检查是否有对应的GeoJSON文件
      const fileName = this.geoJsonMap[nodeId];
      if (!fileName) {
        // loadGeoJsonData: 未找到nodeId对应的GeoJSON文件
        return;
      }
      
      // 如果要显示GeoJSON数据
      if (show) {
        // 确保geoJsonOverlays已初始化
        if (!this.geoJsonOverlays) {
          // loadGeoJsonData: geoJsonOverlays未初始化
          return;
        }
        
        // 如果已经加载过该数据，直接显示并定位
        if (this.geoJsonOverlays[nodeId]) {
          this.showGeoJsonOverlay(nodeId, true);
          this.panToGeoJsonCenter(nodeId);
          return;
        }
        
        // 否则加载GeoJSON数据
        const url = `/map-geojson/geoJson/${fileName}`;
        fetch(url)
          .then(response => response.json())
          .then(data => {
            // 确保geoJsonData已初始化
            if (!this.geoJsonData) {
              this.geoJsonData = {};
            }
            
            // 存储GeoJSON数据
            this.geoJsonData[nodeId] = data;
            
            // 在地图上显示GeoJSON数据
            this.displayGeoJson(nodeId, data);
            
            // 定位到GeoJSON数据的中心点
            this.panToGeoJsonCenter(nodeId);
          })
          .catch(error => {
            // 加载GeoJSON数据失败
          });
      } else {
        // 隐藏GeoJSON数据
        if (typeof this.showGeoJsonOverlay === 'function') {
          this.showGeoJsonOverlay(nodeId, false);
        } else {
          // loadGeoJsonData: showGeoJsonOverlay方法不存在
        }
      }
    },
    
    /**
     * 确保地图图层始终有一个选中的选项
     */
    ensureMapLayerSelected() {
      if (this.treeData && this.treeData.length > 0 && this.treeData[0] && this.treeData[0].children) {
        const mapLayers = this.treeData[0].children;
        if (!Array.isArray(mapLayers)) {
          // 地图图层数据不是数组
          return;
        }
        
        const checkedCount = mapLayers.filter(layer => layer && layer.checked).length;
        
        // 如果没有选中的图层，默认选中第一个
        if (checkedCount === 0 && mapLayers.length > 0 && mapLayers[0]) {
          mapLayers[0].checked = true;
          // 已默认选中图层
          
          // 应用默认选中图层的样式
          if (mapLayers[0].id === "2") {
            this.setMapStyle("amap://styles/darkblue");
          } else if (mapLayers[0].id === "3") {
            this.setMapStyle("amap://styles/normal");
          } else if (mapLayers[0].id === "4") {
            this.setMapStyle("amap://styles/satellite");
          }
        }
      }
    },
    
    /**
     * 设置地图样式
     * @param {string} styleUrl - 地图样式URL
     */
    setMapStyle(styleUrl) {
      if (this.mapManager && this.mapManager.getMap()) {
        const map = this.mapManager.getMap();
        
        // 清除所有图层
        const layers = map.getLayers();
        // 安全地处理图层，确保layers存在且是数组
        if (layers && Array.isArray(layers)) {
          layers.forEach(layer => {
            if (layer && layer.CLASS_NAME && (layer.CLASS_NAME.indexOf('Satellite') > -1 || layer.CLASS_NAME.indexOf('RoadNet') > -1)) {
              map.remove(layer);
            }
          });
        }
        
        // 如果是卫星图，则添加卫星图层和路网图层
        if (styleUrl === "amap://styles/satellite") {
          // 移除样式设置
          try {
            map.setMapStyle('normal'); // 先设置为普通样式
          } catch (error) {
            // 设置基础地图样式失败
          }
          
          // 获取AMap对象
          this.mapManager.onMapReady(() => {
            // 确保地图和AMap对象已加载
            const AMap = window.AMap;
            if (!AMap) {
              // AMap对象未加载
              return;
            }
            
            try {
              // 添加卫星图层
              const satelliteLayer = new AMap.TileLayer.Satellite({
                zIndex: 10
              });
              
              // 添加路网图层
              const roadNetLayer = new AMap.TileLayer.RoadNet({
                zIndex: 11
              });
              
              // 将图层添加到地图
              map.add([satelliteLayer, roadNetLayer]);
              // 已加载卫星图和路网图层
            } catch (error) {
              // 添加卫星图和路网图层失败
            }
          });
        } else {
          // 其他样式直接设置
          try {
            map.setMapStyle(styleUrl);
          } catch (error) {
            // 设置地图样式失败
          }
        }
      }
    },
    
    /**
     * 在地图上显示GeoJSON数据
     * @param {string} nodeId - 节点ID
     * @param {Object} geoJson - GeoJSON数据
     */
    displayGeoJson(nodeId, geoJson) {
      // 确保参数有效
      if (!nodeId || typeof nodeId !== 'string') {
        // displayGeoJson: 无效的nodeId
        return;
      }
      
      if (!this.mapManager || !geoJson) {
        // displayGeoJson: mapManager或geoJson无效
        return;
      }
      
      const map = this.mapManager.getMap();
      if (!map) {
        // displayGeoJson: 地图实例未初始化
        return;
      }
      
      const overlays = [];
      
      // 根据GeoJSON类型设置不同的样式
      const styles = {
        "11": { // 已建管线
          strokeColor: "#3388ff",
          strokeWeight: 3,
          strokeOpacity: 0.8
        },
        "12": { // 高压管线
          strokeColor: "#ff3333",
          strokeWeight: 3,
          strokeOpacity: 0.8
        },
        "13": { // 昆仑燃气
          strokeColor: "#33cc33",
          strokeWeight: 3,
          strokeOpacity: 0.8
        },
        "14": { // 规划高压
          strokeColor: "#ff9900",
          strokeWeight: 3,
          strokeOpacity: 0.8,
          strokeStyle: "dashed"
        },
        "15": { // 规划管线
          strokeColor: "#9933cc",
          strokeWeight: 3,
          strokeOpacity: 0.8,
          strokeStyle: "dashed"
        },
        "16": { // 规划次压
          strokeColor: "#0099cc",
          strokeWeight: 3,
          strokeOpacity: 0.8,
          strokeStyle: "dashed"
        },
        "17": { // 站点
          fillColor: "#ffcc00",
          strokeColor: "#ff9900",
          strokeWeight: 2,
          strokeOpacity: 1,
          fillOpacity: 0.6
        }
      };
      
      const style = styles[nodeId] || styles["11"];
      
      // 处理GeoJSON数据
      try {
        if (!geoJson.features || !Array.isArray(geoJson.features) || geoJson.features.length === 0) {
          // displayGeoJson: GeoJSON数据没有features或为空数组
          return;
        }
        
        geoJson.features.forEach(feature => {
          if (!feature || !feature.geometry) {
            // displayGeoJson: 无效的feature或geometry
            return;
          }
          
          let overlay = null;
          
          // 根据几何类型创建不同的覆盖物
          switch (feature.geometry.type) {
            case "Point":
            case "MultiPoint":
              // 创建点标记
              const coordinates = feature.geometry.coordinates;
              const position = coordinates.length === 2 ? coordinates : coordinates[0];
              
              overlay = new AMap.Marker({
                position: position,
                title: (feature.properties && feature.properties.name) || ""
              });
              break;
              
            case "LineString":
            case "MultiLineString":
              // 创建折线
              const path = feature.geometry.type === "LineString" 
                ? feature.geometry.coordinates 
                : feature.geometry.coordinates.flat();
              
              overlay = new AMap.Polyline({
                path: path,
                ...style
              });
              break;
              
            case "Polygon":
            case "MultiPolygon":
              // 创建多边形
              const polygonPath = feature.geometry.type === "Polygon" 
                ? feature.geometry.coordinates[0] 
                : feature.geometry.coordinates.map(poly => poly[0]).flat();
              
              overlay = new AMap.Polygon({
                path: polygonPath,
                ...style
              });
              break;
          }
          
          if (overlay) {
            try {
              // 为覆盖物添加点击事件，显示提示信息
              if (feature.properties) {
                // 准备提示内容
                const tipContent = this.generateTipContent(feature.properties, nodeId);
                
                // 添加点击事件
                overlay.on('click', (e) => {
                  this.showTip(e, tipContent, nodeId);
                });
              }
              
              // 添加到地图
              map.add(overlay);
              overlays.push(overlay);
            } catch (error) {
              // displayGeoJson: 添加覆盖物到地图时出错
            }
          }
        });
      } catch (error) {
        // displayGeoJson: 处理GeoJSON数据时出错
      }
      
      // 存储覆盖物，以便后续控制显示/隐藏
      if (!this.geoJsonOverlays) {
        this.geoJsonOverlays = {};
      }
      this.geoJsonOverlays[nodeId] = overlays;
    },
    
    /**
     * 控制GeoJSON覆盖物的显示/隐藏
     * @param {string} nodeId - 节点ID
     * @param {boolean} show - 是否显示
     */
    showGeoJsonOverlay(nodeId, show) {
      // 确保参数有效
      if (!nodeId || typeof nodeId !== 'string') {
        // showGeoJsonOverlay: 无效的nodeId
        return;
      }
      
      // 如果隐藏图层，且当前提示框属于该图层，则关闭信息窗体
      if (!show && this.currentTipNodeId === nodeId) {
        this.closeInfoWindow();
        // 关闭图层的提示框
      }
      
      // 确保geoJsonOverlays已初始化
      if (!this.geoJsonOverlays) {
        // showGeoJsonOverlay: geoJsonOverlays未初始化
        return;
      }
      
      const overlays = this.geoJsonOverlays[nodeId];
      if (!overlays || !this.mapManager) {
        // showGeoJsonOverlay: 未找到nodeId对应的覆盖物或mapManager未初始化
        return;
      }
      
      const map = this.mapManager.getMap();
      if (!map) {
        // showGeoJsonOverlay: 地图实例未初始化
        return;
      }
      
      try {
        if (show) {
          // 显示覆盖物
          map.add(overlays);
        } else {
          // 隐藏覆盖物
          map.remove(overlays);
        }
      } catch (error) {
        // showGeoJsonOverlay: 操作覆盖物时出错
      }
    },
    
    /**
     * 生成提示信息内容
     * @param {Object} properties - GeoJSON元素的属性
     * @param {string} nodeId - 节点ID
     * @returns {string} HTML格式的提示内容
     */
    generateTipContent(properties, nodeId) {
      // 如果没有属性，返回默认提示
      if (!properties || Object.keys(properties).length === 0) {
        return `<div class="geo-tip"><h4>${this.getLayerName(nodeId)}</h4><p>暂无详细信息</p></div>`;
      }
      
      // 根据不同的图层类型，生成不同的提示内容
      let html = `<div class="geo-tip"><h4>${this.getLayerName(nodeId)}</h4>`;
      
      // 遍历属性，生成属性列表
      Object.entries(properties).forEach(([key, value]) => {
        // 跳过空值或内部使用的属性（以下划线开头）
        if (value !== null && value !== undefined && value !== '' && !key.startsWith('_')) {
          // 美化属性名称
          const prettyKey = key
            .replace(/([A-Z])/g, ' $1') // 在大写字母前添加空格
            .replace(/_/g, ' ') // 将下划线替换为空格
            .replace(/^./, str => str.toUpperCase()); // 首字母大写
          
          html += `<p><strong>${prettyKey}:</strong> ${value}</p>`;
        }
      });
      
      html += '</div>';
      return html;
    },
    
    /**
     * 根据节点ID获取图层名称
     * @param {string} nodeId - 节点ID
     * @returns {string} 图层名称
     */
    getLayerName(nodeId) {
      // 查找树节点中对应的名称
      if (this.treeData && this.treeData.length > 0) {
        // 查找管点分类
        const pipeCategory = this.treeData.find(item => item.id === '8');
        if (pipeCategory && pipeCategory.children) {
          // 查找对应的子节点
          const node = pipeCategory.children.find(child => child.id === nodeId);
          if (node) {
            return node.label || '未知图层';
          }
        }
      }
      
      // 如果找不到，返回默认名称
      const defaultNames = {
        "11": "已建管线",
        "12": "高压管线",
        "13": "昆仑燃气",
        "14": "规划高压",
        "15": "规划管线",
        "16": "规划次压",
        "17": "站点"
      };
      
      return defaultNames[nodeId] || '未知图层';
    },
    
    /**
     * 显示提示信息
     * @param {Event} e - 点击事件
     * @param {string} content - 提示内容
     * @param {string} nodeId - 节点ID
     */
    showTip(e, content, nodeId) {
      // 确保地图已初始化
      if (!this.mapManager || !this.mapManager.getMap()) {
        // showTip: 地图未初始化
        return;
      }
      
      const map = this.mapManager.getMap();
      
      // 如果已存在提示窗口，先移除
      if (this.infoWindow) {
        map.remove(this.infoWindow);
      }
      
      // 创建信息窗体
      const AMap = window.AMap;
      if (!AMap) {
        // showTip: AMap未加载
        return;
      }
      
      try {
        // 创建信息窗体 - 深色主题
        this.infoWindow = new AMap.InfoWindow({
          content: content,
          offset: new AMap.Pixel(0, -30),
          closeWhenClickMap: true, // 点击地图其他区域关闭
          autoMove: true, // 自动调整窗体到视野内
          isCustom: true, // 使用自定义窗体
          anchor: 'bottom-center', // 设置锚点
          boxShadow: 'none', // 移除默认阴影
        });
        
        // 打开信息窗体
        this.infoWindow.open(map, e.lnglat);
        
        // 记录当前提示框所属的图层ID
        this.currentTipNodeId = nodeId;
        
        // 显示提示信息
      } catch (error) {
        // showTip: 创建或打开信息窗体时出错
      }
    },
    
    /**
     * 关闭信息窗体
     */
    closeInfoWindow() {
      if (this.infoWindow && this.mapManager && this.mapManager.getMap()) {
        try {
          this.mapManager.getMap().remove(this.infoWindow);
          this.infoWindow = null;
          // 重置当前提示框所属的图层ID
          this.currentTipNodeId = null;
          // 已关闭信息窗体
        } catch (error) {
          // closeInfoWindow: 关闭信息窗体时出错
        }
      }
    },
    
    /**
     * 将地图定位到GeoJSON数据的中心点
     * @param {string} nodeId - 节点ID
     */
    panToGeoJsonCenter(nodeId) {
      // 确保参数有效
      if (!nodeId || typeof nodeId !== 'string') {
        // panToGeoJsonCenter: 无效的nodeId
        return;
      }
      
      // 确保geoJsonData已初始化且包含该nodeId的数据
      if (!this.geoJsonData || !this.geoJsonData[nodeId]) {
        // panToGeoJsonCenter: 未找到nodeId对应的GeoJSON数据
        return;
      }
      
      // 确保地图管理器已初始化
      if (!this.mapManager) {
        // panToGeoJsonCenter: 地图管理器未初始化
        return;
      }
      
      const map = this.mapManager.getMap();
      if (!map) {
        // panToGeoJsonCenter: 地图实例未初始化
        return;
      }
      
      try {
        const geoJson = this.geoJsonData[nodeId];
        
        // 如果没有features或为空数组，则返回
        if (!geoJson.features || !Array.isArray(geoJson.features) || geoJson.features.length === 0) {
          // panToGeoJsonCenter: GeoJSON数据没有features或为空数组
          return;
        }
        
        // 计算所有坐标的边界
        let minLng = Infinity;
        let maxLng = -Infinity;
        let minLat = Infinity;
        let maxLat = -Infinity;
        
        // 遍历所有feature，计算边界
        geoJson.features.forEach(feature => {
          if (!feature || !feature.geometry) return;
          
          let coordinates = [];
          
          // 根据几何类型获取坐标
          switch (feature.geometry.type) {
            case "Point":
              coordinates = [feature.geometry.coordinates];
              break;
            case "MultiPoint":
            case "LineString":
              coordinates = feature.geometry.coordinates;
              break;
            case "MultiLineString":
            case "Polygon":
              coordinates = feature.geometry.coordinates.flat();
              break;
            case "MultiPolygon":
              coordinates = feature.geometry.coordinates.flat(2);
              break;
          }
          
          // 更新边界
          coordinates.forEach(coord => {
            if (Array.isArray(coord) && coord.length >= 2) {
              const [lng, lat] = coord;
              minLng = Math.min(minLng, lng);
              maxLng = Math.max(maxLng, lng);
              minLat = Math.min(minLat, lat);
              maxLat = Math.max(maxLat, lat);
            }
          });
        });
        
        // 如果成功计算了边界
        if (minLng !== Infinity && maxLng !== -Infinity && minLat !== Infinity && maxLat !== -Infinity) {
          // 计算中心点
          const centerLng = (minLng + maxLng) / 2;
          const centerLat = (minLat + maxLat) / 2;
          
          // 设置地图中心点
          map.setCenter([centerLng, centerLat]);
          
          // 根据数据类型设置适当的缩放级别
          if (nodeId === "17") { // 站点，需要更大的缩放级别
            map.setZoom(14);
          } else { // 管线类型，使用较小的缩放级别以显示更多内容
            map.setZoom(12);
          }
          
          // 已定位到GeoJSON数据中心点
        } else {
          // panToGeoJsonCenter: 无法计算GeoJSON数据的边界
        }
      } catch (error) {
        // panToGeoJsonCenter: 定位到GeoJSON中心点时出错
      }
    },
    /**
     * 退出地图回到首页
     */
    outMap(){
      this.$router.push("/index")
    }
  },

  /**
   * 销毁地图
   */
  beforeDestroy() {
    if (this.mapManager) {
      this.mapManager.destroy();
      this.mapManager = null;
    }
    // 移除窗口大小变化监听器
    if (this.handleResize) {
      window.removeEventListener('resize', this.handleResize);
    }
  },
};
</script>

<style lang="scss" scoped>
/* GeoJSON提示信息样式 - 深色主题 */
:deep(.geo-tip) {
  padding: 12px;
  max-width: 300px;
  background-color: rgba(30, 30, 30, 0.9);
  color: #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  
  h4 {
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    font-size: 16px;
    color: #4db8ff;
    border-bottom: 1px solid #444;
  }
  
  p {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #cccccc;
  }
  
  strong {
    color: #ffffff;
    font-weight: 600;
  }
}

/* 自定义信息窗体样式 */
:deep(.amap-info-close) {
  top: 8px;
  right: 8px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

:deep(.amap-info-content) {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:deep(.amap-info-sharp) {
  background-color: rgba(30, 30, 30, 0.9) !important;
}

/* 树形结构面板样式 */
.tree-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 220px;
  height: 100%;
  background-color: rgba(11, 50, 89, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 50, 125, 0.2);
  z-index: 90;
  backdrop-filter: blur(5px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  overflow: hidden;

  .tree-header {
    padding: 15px;
    height: 50px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(11, 50, 89, 0.5);

    .tree-title {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
    }

    .tree-close {
      width: 20px;
      height: 20px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.7);
      transition: all 0.2s ease;

      &:hover {
        color: #ffffff;
        transform: scale(1.1);
      }

      svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  .tree-content {
    padding: 10px;
    height: calc(100% - 50px);
    overflow-y: auto;

    /* 自定义滚动条 */
    &::-webkit-scrollbar {
      width: 6px;
      background-color: rgba(0, 0, 0, 0.1);
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
}

/* 自定义Element UI树组件样式 */
:deep(.el-tree) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.9);

  .el-tree-node__content {
    height: 36px;
    background-color: transparent;
    border-radius: 4px;
    transition: all 0.2s ease;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }

  .el-tree-node:focus > .el-tree-node__content {
    background-color: rgba(0, 150, 255, 0.2);
  }

  .el-tree-node__expand-icon {
    color: rgba(255, 255, 255, 0.7);
  }

  .custom-tree-node {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .node-label {
      display: flex;
      align-items: center;

      i {
        margin-right: 5px;
      }
    }
  }
}

/* 自定义Element UI复选框样式 */
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #0096ff;
  border-color: #0096ff;
}

:deep(.el-checkbox__inner:hover) {
  border-color: #0096ff;
}

:deep(.el-checkbox__input.is-focus .el-checkbox__inner) {
  border-color: #0096ff;
}
.scale-wrap {
  color: #d3d6dd;
  background: #03050c;
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;

  .map_box {
    width: 100%;
    height: 100%;
    position: relative;

    .map {
      width: 100%;
      height: 100%;
    }

    .tool-panel {
      position: absolute;
      left: 20px;
      top: 20px;
      transform: none;
      background-color: rgba(11, 50, 89, 0.1);
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 50, 125, 0.2);
      z-index: 100;
      display: flex;
      flex-direction: column;
      gap: 0;
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: left 0.3s ease-out;

      .tool-item {
        margin-top: 0;

        &:not(:first-child) {
          margin-top: 15px;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 8px;
        border-radius: 8px;
        background-color: #0b3259;
        width: 32px;
        height: 32px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        border: none; /* 移除边框 */
        position: relative;
        overflow: hidden;

        svg {
          width: 32px;
          height: 32px;
          transition: transform 0.2s ease;
        }

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0);
          transition: background-color 0.3s ease;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

          &::before {
            background-color: rgba(255, 255, 255, 0.05);
          }

          .tool-icon {
            transform: scale(1.1);
          }
        }

        &:active {
          transform: translateY(0);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

          &::before {
            background-color: rgba(255, 255, 255, 0.1);
          }
        }

        &.active {
          background-color: #0078d4;
          box-shadow: 0 0 15px rgba(0, 120, 212, 0.5);

          .tool-icon {
            transform: scale(1.1);
          }

          &::before {
            background-color: rgba(255, 255, 255, 0.1);
          }
        }

        .tool-icon {
          width: 28px;
          height: 28px;
          margin-bottom: 4px;
          transition: transform 0.2s ease;
          color: #ffffff;

          .icon_imgs {
            width: 28px;
            height: 28px;
          }
        }

        .tool-text {
          font-size: 12px;
          color: #ffffff;
          text-align: center;
          line-height: 1.2;
          user-select: none;
        }
      }
    }
  }
}

/* 地图控件容器 */
.map-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 90;
}

/* 旋转控件样式 */
.control-group {
  position: absolute;
  z-index: 100;
  // background-color: rgba(11, 50, 89, 0.05); /* 更透明的背景 */
  border-radius: 50%; /* 圆形 */
  padding: 10px;
  pointer-events: auto;
  // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 50, 125, 0.15);
  // backdrop-filter: blur(3px);
  // border: 1px solid rgba(255, 255, 255, 0.08);
}

.rotation-controls {
  right: 20px;
  top: 20px;
  transition: all 0.3s ease;
}

.rotation-controls:hover {
  transform: scale(1.05);
}

.combined-controls {
  right:60px;
  top: 180px;
}

.navigation-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5px;
  width: 110px;
  height: 110px;
  background-color: rgba(11, 50, 89, 0.2);
  border-radius: 50%;
  padding: 5px;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0b3259;
  border-radius: 50%; /* 改为圆形按钮 */
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  background-color: rgba(11, 50, 89, 0.8);
  color: #0096ff;
}

.nav-btn svg {
  width: 20px;
  height: 20px;
}

.nav-up {
  grid-column: 2;
  grid-row: 1;
}

.nav-right {
  grid-column: 3;
  grid-row: 2;
}

.nav-center {
  grid-column: 2;
  grid-row: 2;
  background-color: #0078d4; /* 突出中心按钮 */
  width: 36px;
  height: 36px;
  margin: -2px;
}

.nav-left {
  grid-column: 1;
  grid-row: 2;
}

.nav-down {
  grid-column: 2;
  grid-row: 3;
}

.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0b3259;
  border-radius: 50%; /* 改为圆形按钮 */
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

.control-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  background-color: rgba(11, 50, 89, 0.8);
  color: #0096ff;
}

.control-btn svg {
  width: 20px;
  height: 20px;
}

/* 高德地图工具栏样式自定义 */
:deep(.amap-toolbar) {
  background-color: rgba(11, 50, 89, 0.1) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 50, 125, 0.2) !important;
  backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

:deep(.amap-toolbar .amap-toolbar-control) {
  background-color: #0b3259 !important;
  border-radius: 8px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.2s ease !important;
  color: #ffffff !important;
}

:deep(.amap-toolbar .amap-toolbar-control:hover) {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  background-color: rgba(11, 50, 89, 0.8) !important;
  color: #0096ff !important;
}

/* 测量信息面板样式 */
.info-panel {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 280px;
  background-color: rgba(11, 50, 89, 0.15);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 50, 125, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 100;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: fadeInUp 0.4s ease-out;
  transform-origin: bottom right;
  pointer-events: auto;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: rgba(11, 50, 89, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.info-close {
  width: 22px;
  height: 22px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 4px;
}

.info-close:hover {
  color: #ffffff;
  transform: scale(1.1) rotate(90deg);
  background-color: rgba(255, 255, 255, 0.1);
}

.info-close svg {
  width: 100%;
  height: 100%;
}

.info-content {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.info-type-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.info-type-icon svg {
  width: 45px;
  height: 45px;
  color: #0096ff;
  filter: drop-shadow(0 0 5px rgba(0, 150, 255, 0.5));
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.info-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
}

.info-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  transition: all 0.2s ease;
}

.info-item:hover .info-label {
  color: rgba(255, 255, 255, 0.95);
}

.info-value {
  font-size: 15px;
  font-weight: 600;
  color: #0096ff;
  text-shadow: 0 0 5px rgba(0, 150, 255, 0.3);
  transition: all 0.2s ease;
}

.info-item:hover .info-value {
  color: #00a8ff;
  text-shadow: 0 0 8px rgba(0, 168, 255, 0.5);
  transform: translateX(-3px);
}

/* 动画定义 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
:deep(.amap-overlay-text-container){
  background-color: rgba(11, 50, 89, 0.8) !important;
   color: white;
   border: none !important;
}
</style>
